<template>
    <div class="studentWrapper" v-show="listShow">
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <ul class="studentList">
                <li class="studentItem" flex="cross:center" v-for="(studentItem,studentIndex) in studentList" @click="checkFuc(studentIndex)">
                    <div class="label" :class="{'checked':studentItem.checked&&!radio,'radioChecked':studentItem.checked&&radio}" flex-box="0"></div>
                    <div class="imgWrapper" flex-box="0">
                        <img :src="studentItem.photoUrl+'?imageView2/0/w/80/format/jpeg'">
                    </div>
                    <div class="studentName font13" flex-box="0" v-text="studentItem.studentNameEN?studentItem.studentName+' / '+studentItem.studentNameEN:studentItem.studentName"></div>
                </li>
            </ul>
        </div>
        <div class="saveBtn"  flex="main:center cross:center"  @click="closeAddStudent" v-if="!radio">确定</div>
    </div>
</template>
<script type="text/babel">
    import API from '../api/api.js'
    import {domain,imagedomain} from '../api/api.js'
    const api = new API();
    export default{
        data(){
            return {
                listShow: false,
                //是否显示选择学员列表true显示，false不显示
                isAllCheck: false,
                //多选时是否已经全选true为全选，false不全选
                studentList: [],
                //学员列表
                saveList:[],
                //保存后学员列表
                className:''
                //班级名称
            };
        },
        props:{
            classId:{
                default:''
            },
            //班级Id
            title:{
                default:''
            },
            //学员选择页标题
            radio:{
                default:false
            },
            //学员选择列表为单选还是多选
            appCode:{
                default:''
            },
            close:{
                default:''
            }
            //应用code
        },
        mounted(){
            this.getGroupStudent();
        },
        methods: {
            /**
             * @describe 保存选中学员并调用父级组件方法
             *
             * @param    appCode  应用code
             *
             * @param    classId  班级Id
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            addStudent(nosave){
                this.saveList=this.studentList;
                if(!nosave){
                    this.$emit('addStudent',this.saveList,this.className,this.isAllCheck);
                }
            },
            propsTitle(right){
                this.$util.JsBridge('propsTitle', {
                    title: this.title,
                    titleRight:right,
                }, (res) => {

                })
            },
            getGroupStudent(){
                /**
                 * @describe 获取学生列表
                 *
                 * @param    appCode  应用code
                 *
                 * @param    classId  班级Id
                 *
                 * @date     2017-8-15
                 *
                 * @author   langwenqi
                 */

                let param = {
                    ifSelf:true,
                    appCode:this.appCode,
                    classId:this.classId
                };
                api.getGroupStudent(param).then((res) => {
                    let {code, rs} = res;
                    if (code == 200) {
                        if(rs&&rs.length>0){
                            this.className=rs[0].tname;
                            if(rs[0].list&&rs[0].list.length>0){
                                this.studentList=rs[0].list;
                                this.studentList.map((e)=>{
                                    if(e.photoUrl===''){
                                        e.photoUrl=this.$util.getDefaultHeader(e.studentId)
                                    }
                                })
                            }
                            if(!this.radio){
                                this.makeAllCheck();
                            }
                            this.addStudent(this.radio);
                        }
                    }else{
                        this.$emit('addStudent',[],'',true);
                    }
                }).catch(()=>{
                    this.$emit('addStudent',[],'',true);
                })
            },
            /**
             * @describe 关闭当前webView
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, ()=> {})
            },
            /**
             * @describe 显示学生列表
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            showStudent(){
                //注册点击客户端头部左侧按钮事件
                if(this.close==1){
                    this.$util.jsBridgeCallBack('jsLeftAction',this.closeWebView);
                }else{
                    this.$util.jsBridgeCallBack('jsLeftAction',this.closeStudent);
                }

                if(!this.radio){
                    //注册点击客户端头部右侧按钮事件
                    this.$util.jsBridgeCallBack('jsRightAction',this.makeAllCheck);
                }
                //保持上一次选择选中状态
                this.studentList=this.saveList;
                if(this.isAllCheck&& !this.radio){
                    this.propsTitle('取消全选');
                }else if(!this.radio){
                    this.propsTitle('全选');
                }
                this.listShow=true;
            },
            /**
             * @describe 关闭学生选择列表
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            closeStudent(){
                if(!this.radio){
                    this.propsTitle('');
                    this.$util.jsBridgeCallBack('jsRightAction',null);
                }
                this.$util.jsBridgeCallBack('jsLeftAction',this.closeWebView);
                if(this.close!=1){
                    this.listShow=false;
                }
            },
            closeAddStudent(){
                this.addStudent();
                this.closeStudent();
            },
            /**
             * @describe 检测是否已经全选
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            checkAll(){
                let isAllCheck=true;
                this.studentList.forEach((el,index)=>{
                    if(!el.checked){
                        isAllCheck=false;
                        return;
                    }
                });
                if(isAllCheck&& !this.radio){
                    this.propsTitle('取消全选');
                }else if(!this.radio){
                    this.propsTitle('全选');
                }
                this.isAllCheck=isAllCheck;
            },
            /**
             * @describe 选择学员
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            checkFuc(index){
                if(!this.radio){
                    this.$set(this.studentList[index],'checked',!this.studentList[index].checked)
                }else{
                    this.studentList.forEach((el,index)=>{
                        this.$set(this.studentList[index],'checked',false)
                    });
                    this.$set(this.studentList[index],'checked',true)
                }
                if(!this.radio){
                    this.checkAll();
                }else{
                    this.closeAddStudent();
                }
            },
            /**
             * @describe 全选
             *
             * @date     2017-8-15
             *
             * @author   langwenqi
             */
            makeAllCheck(){
                if(this.isAllCheck){
                    this.studentList.forEach((el,index)=>{
                        this.$set(this.studentList[index],'checked',false)
                    });
                    if(this.listShow){
                        this.propsTitle('全选');
                    }
                    this.isAllCheck=false;
                }else{
                    this.studentList.forEach((el,index)=>{
                        this.$set(this.studentList[index],'checked',true)
                    });
                    if(this.listShow){
                        this.propsTitle('取消全选');
                    }
                    this.isAllCheck=true;
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    .saveBtn{
        background:#17A5AF;
        border-radius:0.06rem;
        width:1.8rem;
        height:0.36rem;
        position:absolute;
        left:0;
        right:0;
        bottom:0.24rem;
        font-size:0.13rem;
        color:#fff;
        margin: auto;
        z-index: 111111;
    }
    .studentWrapper{
        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        left:0;
        z-index: 333;
        .blurBg{
         opacity: 1;
        }
        .dataInfo {
            height: 100%;
            overflow: auto!important;
            -webkit-overflow-scrolling:touch;
            overflow-scrolling:touch;
            background: rgba(0,0,0,0.7);
        }
        .studentList{
            padding: 0 0.12rem 1rem 0.12rem;
            .studentItem{
                padding-top: 0.12rem;
                .label{
                    background:rgba(0,0,0,0.2);
                    border:1px solid #ffffff;
                    width:0.21rem;
                    height:0.21rem;
                    border-radius:100%;
                    margin-right: 0.11rem;
                }
                .checked{
                    background:url("./images/checked.png") no-repeat center center/cover;
                }
                .radioChecked{
                    background:url("./images/radioCheck.png") no-repeat center center/cover;
                }
                .imgWrapper{
                    height: 0.44rem;
                    width: 0.44rem;
                    border-radius: 100%;
                    overflow: hidden;
                    img{
                        -o-object-fit: cover;
                        object-fit: cover;
                        display: block;
                        height: 100%;
                        width: 100%;
                    }
                }
                .studentName{
                    margin-left: 0.12rem;
                }

            }
        }
    }
</style>